<template>
  <div class="jinrituijian">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="box">
        <p class="riqi">{{ tiem }}</p>
        <p class="tuijian">今日推荐</p>

        <slot>
          <span class="yonhu">{{ theUname }}</span></slot
        >
        <slot> <span class="jifen">积分兑换</span></slot>
        <div class="mying">
          <van-image
            round
            fit="cover"
            width="50px"
            height="50px"
            :src="theImg"
            @click.native="$router.push('/mineSetting')"
          />
        </div>
      </div>

      <!-- 展示面板开始-->
      <div class="mybox" v-for="item in dianying" :key="item.id">
        <div class="jieshao">
          <p class="yingpian">大片放映</p>
          <p class="dianyingming">{{ item.name }}</p>
        </div>
        <div class="lunbotu">
          <div class="ImgURL">
            <van-image fit="cover" :src="item.imgURL" lazy-load />
          </div>
        </div>

        <div class="xiangqing">
          <p class="ppp">{{ item.film }}</p>
        </div>
      </div>
      <!-- 展示面板结束 -->
    </van-list>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { filmReview } from '@/api/ping/index';
import { getInfo } from '@/api/hao/index';

export default {
    data() {
        return {
            dianying: [],
            loading: false,
            finished: false,
            tiem: new Date().toLocaleDateString(),
            info: {
                uname: ''
            }
        };
    },
    created() {
        this.myFilm();
        this.getInfo();
    },
    computed: {
        ...mapGetters(['theImg', 'theUname'])
    },
    methods: {
        ...mapMutations(['userInfo/updateRem']),
        async myFilm() {
            try {
                const { data } = await filmReview();
                // console.log(data);
                this['userInfo/updateRem'](data)
                this.dianying = data;
            } catch (err) {
                console.log(err);
            }
        },
        async onLoad() {
            // // console.log(1);
            // const res = await filmReview();
            // // console.log(res);
            this.loading = false;
            this.finished = true;
        },
        async getInfo() {
            try {
                const res = await getInfo();
                // console.log(res);
                this.info = res;
            } catch (err) {
                this.$toast.fail('获取失败');
            }
        }
    }
};
</script>

<style scoped lang="scss">
.jinrituijian {
  background-color: #eeeeee;
  font-family: "微软雅黑";

  /deep/.box {
    background-color: transparent;
    // clear: both;
    width: 90%;
    height: 110px;
    // height: 500px;
    margin: 0 auto;
    padding-top: 30px;
  }
  .riqi {
    font-size: 20px;
    // float: left;
    // padding: 0px 10px 10px 14px;
    position: absolute;
    left: 35px;
    top: 20px;
    // padding: 0px 0px 10px 15px;
  }
  .tuijian {
    font-size: 40px;
    font-weight: 700;
    float: left;
    padding-top: 5px;
    // padding-left: 10px;
  }
  .mying {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 270px;
  }
  .yonhu {
    font-size: 20px;
    position: absolute;
    right: 160px;
    top: 50px;
  }
  .jifen {
    font-size: 30px;
    font-weight: 700;
    color: #ff9800;
    position: absolute;
    right: 160px;
    top: 90px;
  }
  .mybox {
    background-color: #fff;
    border-radius: 10%;
    clear: both;
    width: 90%;
    // height: 800px;
    margin: 0 auto;
    padding-top: 20px;
    font-size: 20px;
    margin-bottom: 40px;
  }
  .yingpian {
    // float: left;
    font-size: 30px;
    text-align: left;
  }
  .dianyingming {
    // float: left;
    font-size: 50px;
    font-weight: 700;
    text-align: left;
    line-height: 1px;
  }
  .strimg {
    clear: both;
    padding-top: 100px;
  }
  .lunbotu {
    background-color: transparent;
    width: 80%;
    // height: 330px;
    top: 350px;
    margin: 0 auto;
    .ImgURL {
      width: 100%;
      // height: 390px;
    }
  }

  .jieshao,
  .xiangqing {
    width: 80%;
    height: 150px;
    background-color: transparent;
    margin: 0 auto;
  }
  .ppp {
    font-size: 30px;
    text-align: left;
  }
}
</style>
